<template>
	<div class="classify">
		<div class="classify_left floatLeft">
			<ul class="classify_left_list ">
				<li class="classify_left_item" v-for="(item,index) in left_list" @click="changeLeft(index)">
					{{item}}
				</li>
			</ul>
		</div>
		<div class="classify_right floatLeft">
			<div class="right_wrap">
				<div class="right_list">
					<div class="right_item" v-for="(val,index) in right_list[content_index].content_list">
						<h3 class="item_title">{{val.title}}</h3>
						<div class="item_wrap">
							<div class="item_wrap_i" v-for="item in val.items">{{item}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name:'classify',
	data(){
		return {
			left_list:['IT 互联网','设计 创造','语言 留学','职业考证','升学 考研','兴趣 生活'],
			content_index:0,
			right_list:[{
				content_list:[{
					title:'互联网产品',
					items:['产品策划','产品策划','产品策划','产品策划','产品策划','产品策划']
				},{
					title:'互联网营销',
					items:['淘宝营销','淘宝营销','淘宝营销','淘宝营销','淘宝营销','淘宝营销']
				},{
					title:'编程语言',
					items:['C++','C++','C++','C++','C++','C++']
				},{
					title:'移动开发',
					items:['Android','Android','Android','Android','Android','Android']
				},{
					title:'网络与运维',
					items:['信息安全','信息安全','信息安全','信息安全','信息安全','信息安全']
				}]
			},{
				content_list:[{
					title:'UI设计',
					items:['交互设计','交互设计','交互设计','交互设计','交互设计','交互设计']
				},{
					title:'游戏动画设计',
					items:['游戏角色','游戏角色','游戏角色','游戏角色','游戏角色','游戏角色']
				}]
			},{
				content_list:[{
					title:'出国留学',
					items:['雅思','雅思','雅思','雅思','雅思','雅思']
				}]
			},{
				content_list:[{
					title:'公考求职',
					items:['公务员','公务员','公务员','公务员','公务员','公务员']
				}]
			},{
				content_list:[{
					title:'考研',
					items:['规划指导','规划指导','规划指导','规划指导','规划指导','规划指导']
				}]
			},{
				content_list:[{
					title:'文艺修养',
					items:['摄影','摄影','摄影','摄影','摄影','摄影']
				}]
			}]
		}
	},
	mounted:function(){
		var itemInit = document.getElementsByClassName("classify_left_item")[0];
		itemInit.setAttribute('class','classify_left_item classify_left_item_active');
	},
	methods:{
		changeLeft:function(index){
			var leftItems = document.getElementsByClassName("classify_left_item")
			for(var i=0; i<leftItems.length; i++){
				leftItems[i].setAttribute('class','classify_left_item')
			}
			leftItems[index].setAttribute('class','classify_left_item classify_left_item_active')
			console.log(leftItems[index])
			this.$data.content_index = index;
		}
	}
}
</script>

<style scoped>
.classify{
	height: 100%;
}
.classify_left{
	width: 2.5rem;
	height: 100%;
	background-color: #efeff4;
}
.classify_left_item{
	width: 100%;
	line-height:3;
	text-align:center;
	font-size:0.38rem;
	border-bottom:1px solid #C8C7CC;
	color:#777;
}
.classify_left_item_active{
	background-color: #fff;
}


.classify_right{
	width: 7.5rem;
	height: 100%;
	/*background-color: pink;*/
}
.right_wrap{
	/*width: 90%;*/
	width: 100%;
	padding:0 10px;
	box-sizing: border-box;
	margin:0 auto;
	height: 100%;
	overflow: auto;

}
.right_list{
}
.right_item{
	/*background-color: #eee;*/
	margin-bottom:20px;
	padding-bottom:20px;
	border-bottom: 1px solid #C8C7CC;
}
.right_item:last-child{
	border:none;
}
.item_title{
	color:#000;
	font-weight:normal;
	font-size:0.5rem;
	line-height: 2.5;
}
.item_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	align-items: center;
}
.item_wrap_i{
	width: 32%;
	height: 1rem;
	margin:5px 0;
	border-radius:5px;
	background-color: #efeff4;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
</style>